//样衣发货
<template>
<div>
    <common-header
        :title="title"
        :type=3></common-header>
    <div class="mui-content audit-search primaryList-details">
        <ul>
            <li class="mui-input-row">
                <a class="mui-icon iconfont icon-arrowleft selectRight"></a>
                <label>快递公司:</label>
                <input id="primaryList-delivery-num" v-model="expressName" class="sDemand-details-input" type="text" placeholder="请输入快递公司">
            </li>
            <li class="mui-input-row">
                <label>快递单号:</label>
                <input id="primaryList-delivery-num" v-model="num" class="sDemand-details-input" type="number" placeholder="请输入快递单号">
            </li>
            <!-- <li class="mui-input-row">
                <label>总共件数:</label>
                <input id="primaryList-delivery-count" class="sDemand-details-input" type="number" placeholder="请输入货物件数">
            </li> -->
        </ul>
    </div>
    <div class="audit-button">
        <ul>
            <li class="audit-sure oneScore-sure">
                <button id="pictureAudit-but" type="button" class="mui-btn mui-btn-blue" @click="sendDelivery">发货</button>
            </li>
        </ul>
    </div>
    <vue-pickers
      :show="showPicker"
      :columns="columns"
      :defaultData="defaultData"
      :selectData="pickData"
      :link="link"
      @cancel="showPicker = false"
      @confirm="confirmFn"></vue-pickers>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import commonHeader from '@/components/commonHeader.vue'
import vuePickers from 'vue-pickers'
import API from '@/service/api'
export default {
    components: { commonHeader, vuePickers },
    data() {
        return {
            title: '样衣初选发货',
            expressList: [],
            showPicker: false,
            num: '',
            expressName: '',
            columns: 1,
            defaultData: [{text: '请选择'}],
            pickData: {
                // 第一列的数据结构
                data1: []
            },
        }
    },
    computed: {
        ...mapState( [ 'sample_id' ] ) 
    },
    methods: {
        ...mapMutations( [ 'UPDATE_SHOW_LOADING' ] ),
        confirmFn(val) {
            this.showPicker = false
            this.defaultData = [val.select1]
        },
        show() {
          this.showPicker = true
        },
        async initialization() {
            let expressList = await API.primary.getExpressList()
            expressList.forEach(element => {
                this.pickData.data1 =[ { text: element.label, value: element.value }, ...this.pickData.data1 ]
            });
            this.UPDATE_SHOW_LOADING(false)
        },
        check() {
            let flag = true
            if(!this.expressName) {
                this.$error('请填写快递公司！')
				flag =  false
				return flag
            }
            if(!this.num) {
                this.$error('请填写快递公司单号！')
				flag =  false
				return flag
            }
            return flag
        },
        sendDelivery() {
            if(!this.check()) return
            this.UPDATE_SHOW_LOADING(true)
            let data = {
                ids: this.sample_id,
                expressId: this.num,
                expressName: this.expressName,
            }
            API.primary.sendSample(data).then(res=>{
                if(res.code == 1){
                    this.UPDATE_SHOW_LOADING(false)
                    this.$success()
                    setTimeout(()=>{
                        this.$router.push( { name: 'primary' } )
                    },1000)
                }else this.$error(res.errMsg)
            })
        }
    },
    created() {
       this.initialization()
    } 
}
</script>
<style scoped>
.select-span{
    margin-top: 12px;
    margin-left: 10px;
    font-size: 14px;
    line-height: 14px;
    /* height: 100%; */
    display: inline-block;
    color: #777;
}
.oneScore-sure{
    width:100%!important;
}
.icon-fanhui{
    padding: 1rem !important;
}
.audit-search ul li select{
    height: 3.6rem;
    line-height: 3.6rem;
}
.audit-search ul li label{
    padding: 1.2rem 0 !important;
    text-align: left !important;
}
.audit-search ul li a.selectRight{
    font-size: 1.4rem;
    top: 0.6rem;
    right: 0;
}
</style>

